<template>
  <div class="dashboard-container">
    <div class="dashboard-list">
      <div class="charts">
        <div class="title">大山AI系统</div>
        <div class="textBox">
          <div class="text">这是一款基于NestJs的系统，适合想做全栈的前端朋友使用，要具备一定的数据库、Redis、Nignx等服务端相关知识、它可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA，商城等，还配上了AI，可以二次开发做出更符合您的业务系统。本人会不断更新系统版本，例如增加包含但不局限于以下功能：工作流、AI业务弹窗等。QQ群1：802109040）</div>
        </div>
      </div>
    </div>
    <div class="dashboard-list">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="charts">
            <div class="title">网站总询盘数据</div>
            <Charts classes="box-bg-color" :options="pieOptions" height="280px"></Charts>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="charts">
            <div class="title">网站总访问数据</div>
            <Charts classes="box-bg-color" :options="barOptions" height="280px"></Charts>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="dashboard-list">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="charts">
            <div class="title">内容数据</div>
            <div class="items">
              <div class="item">
                <div class="value">{{ accessStatisData.accessNum }}</div>
                <div class="icon"><svg-icon class="svgIcon" name="accessNum"></svg-icon></div>
                <div class="label">内容访问总量</div>
              </div>
              <div class="item">
                <div class="value">{{ accessStatisData.collectNum }}</div>
                <div class="icon"><svg-icon class="svgIcon" name="collectNum"></svg-icon></div>
                <div class="label">内容收藏总量</div>
              </div>
              <div class="item">
                <div class="value">{{ accessStatisData.consultNum }}</div>
                <div class="icon"><svg-icon class="svgIcon" name="consultNum"></svg-icon></div>
                <div class="label">内容咨询总量</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="charts">
            <div class="title">AI快捷添加</div>
            <div class="fastBox">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-button type="primary" @click="toPath('/content/column')">
                    <el-icon><Position /></el-icon>
                    快速打开AI栏目新增窗口
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" @click="toPath('/content/content')">
                    <el-icon><Position /></el-icon>
                    快速打开AI内容新增窗口
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" @click="toPath('/content/tags')">
                    <el-icon><Position /></el-icon>
                    快速打开AI标签新增窗口
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, type RouteRecordRaw, useRouter } from 'vue-router'
import { Position } from '@element-plus/icons-vue'

import Charts from '_c/Charts/index.vue'

import GrowCard from './components/GrowCard.vue'
import ProductCard from './components/ProductCard.vue'

import { ElMessage } from 'element-plus'

import { autoProcess } from '@/utils/autoProcess'

import {
  getClientUser,
  getMessage,
  getFormerlyMonth,
  getAccessStatis,
  type QueryClientUser,
  type QueryMessage,
  type QueryAccess,
  type GetAccess,
} from '@/api/public'

const clientUserData = ref<QueryClientUser>({ list: [], total: 0 })
/** 查询客户端用户列表所有 */
const getClientUserApi = async () => {
  const res = await getClientUser()
  if (res?.code === 200) {
    clientUserData.value = res.data as object
  } else {
    ElMessage({ message: res?.msg || '网络异常，请稍后重试', type: 'error' })
  }
}
getClientUserApi()

/** 查询客户端用户列表所有 */
const barOptions = ref<object>({})
const barData = ref<QueryAccess>({ yearMonth: [], dataCount: [] })
const getFormerlyMonthApi = async () => {
  const res = await getFormerlyMonth()
  if (res?.code === 200) {
    barData.value = res.data as object
    barOptions.value = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: barData.value.yearMonth,
          axisLabel: {
            interval: 0
          },
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '访问数',
          type: 'bar',
          barWidth: '40%',
          data: barData.value.dataCount,
        }
      ]
    }
  } else {
    ElMessage({ message: res?.msg || '网络异常，请稍后重试', type: 'error' })
  }
}


const messageData = ref<QueryMessage>({ isNoReadNumber: 0, isReadNumber: 0, allNumber: 0 })
const pieOptions = ref<object>({})
/** 查询留言所有 */
const getMessageApi = async () => {
  const res = await getMessage()
    if (res?.code === 200) {
      messageData.value = res.data as object
      pieOptions.value = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '询盘',
            type: 'pie',
            radius: '50%',
            data: [
              { value: messageData.value.allNumber, name: `(总询盘数：${messageData.value.allNumber})` },
              { value: messageData.value.isNoReadNumber, name: `(未读询盘数：${messageData.value.isNoReadNumber})` },
              { value: messageData.value.isReadNumber, name: `(已读询盘数：${messageData.value.isReadNumber})` },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
  } else {
    ElMessage({ message: res?.msg || '网络异常，请稍后重试', type: 'error' })
  }
}

const accessStatisData = ref<GetAccess>({ consultNum: 0, collectNum: 0, accessNum: 0 })

/** 查询内容统计 */
const getAccessStatisApi = async () => {
  const res = await getAccessStatis()
  if (res?.code === 200) {
    accessStatisData.value = res.data as object;
    // console.log(accessStatisData.value)
  } else {
    ElMessage({ message: res?.msg || '网络异常，请稍后重试', type: 'error' })
  }
}

// 快捷跳转
const route = useRoute()
const router = useRouter()
const toPath = (path: string) => {
  router.push({
    path: `${path}`,
    query: {
      isAdd: 'Y'
    }
  })
}

onMounted(() => {
  // let p = new autoProcess();
  // p.config.startDateTime = 'auto';
  // p.config.endDateTime = 'auto';
  // p.taskList = [
  //   {
  //     id: '2',
  //     taskStartTime: new Date,
  //     taskName: '哈哈',
  //     taskCode: 'console.log(222)',
  //     type: 'common'
  //   }
  // ]
  // p.init()
  // console.log(p, 'index')
  setTimeout(() => {
    getFormerlyMonthApi();
    getMessageApi();
    getAccessStatisApi();
  }, 50)
})

</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 0;

  .dashboard-list {
    margin-bottom: 15px;

    .el-col .fastBox {
      text-align: center;
    }
  }

  .charts {
    height: 100%;
    background-color: #fff;

    .title {
      font-size: 28px;
      padding: 16px 20px;
      font-family: cursive;
      border-bottom: 2px solid #ddd
    }

    .items {
      padding: 10px 0 40px;
      display: flex;
    }

    .textBox {
      padding: 10px 20px;

      .text {
        font-size: 16px;
        line-height: 1.8
      }
    }

    .item {
      width: 33.3333%;
      padding: 12px 20px 28px;
      border-bottom: 1px dashed #ddd;
      text-align: center;

      .svgIcon {
        fill: #F8BD15;
        font-size: 48px;
        margin: 12px 0 16px
      }

      .label {
        font-size: 18px;
        color: #333;
      }

      .value {
        font-size: 38px;
        color: red;
        font-weight: bold;
      }
    }

    .fastBox {
      padding: 40px 0
    }
  }
  .grow-card-wrapper {
    .grow-card {
      margin-bottom: 12px;
    }
  }

  :deep(.echart-container) {
    border-radius: 4px;
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, 0.05);
  }

  .product-demo {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, 0.05);
    padding: 5px;

    .product_tip {
      display: flex;
      height: 32px;
      margin-bottom: 10px;
      justify-content: space-between;
      align-items: center;
      padding-left: 7px;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
    }
  }
}

@media only screen and (max-width: 1200px) {
  .dashboard-container .product-demo {
    margin-top: 12px;
  }
}

@media only screen and (min-width: 1200px) {
  .dashboard-container .product-demo {
    margin-top: 0;
  }
}
</style>
